<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一夕千念</title>
</head>
<body>
    <div id="app">
        <div class="all">
            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-dark">
                            <h3 class="lyb_bt">一夕千念</h3>
                            <el-divider content-position="center" >发布就不能删除了哦</el-divider><br>
                            <br><br><br><br>
                            <!-- <el-input placeholder="这里你可以输入你想说的话，发送后不可删除哦" v-model="newMessage" clearable>
                            </el-input> -->
                        </div></el-col>
                      </el-row>
                </el-header>
                <el-main>
                    <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-dark">
                            <!-- <h3 class="lyb_bt">留言板</h3> -->
                            <el-input type="textarea" :rows="10" class="lyb_nr" placeholder="这里你可以输入你想说的话，发送后不可删除哦" v-model="newMessage" clearable>
                            </el-input>
                        </div></el-col>
                      </el-row>
                    <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple-dark yhm"> 
                            <el-input  type="text" :rows="10" class="lyb_nr" placeholder="输入用户名，（最多20个字符）,不输入默认为匿名用户" v-model="username" maxlength="20">
                            </el-input>
                        </div></el-col>
                    </el-row>
                    <el-row>
                        
                        <el-col :span="24" class="fabu">
                            <el-button @click="sendMessage" type="primary" icon="el-icon-position" round>发布</el-button>
                            <!-- <div class="grid-content bg-purple"> -->
                                <!-- <el-input placeholder="请输入内容" v-model="input" clearable></el-input> -->
                            <!-- </div> -->
                        </el-col>
                        <!-- <el-col :span="12"><div class="grid-content bg-purple-light">right</div></el-col> -->
                    </el-row><br><br><br>
                    <el-divider content-position="center" >总有些惊奇的际遇</el-divider><br>
                    <br><br>
                    <el-row>
                        <el-col :span="24" class="nr_bg">
                            <el-card class="box-card card" v-for="(message, index) in messages" :key="index">
                                <div slot="header" class="clearfix" >
                                    <span>id：{{ message.username }}</span>
                                </div>
                                <div class="text item">
                                    <!-- <span>{{ message.username }}:</span> -->
                                    <div v-html="formatMessage(message.content)" class="message_nr"></div>
                                    <!-- {{ message.content }}  -->
                                    <!-- - {{ formatDate(message.timestamp) }} -->
                                </div>
                                <el-divider content-position="right" >{{ formatDate(message.timestamp) }}</el-divider>
                              </el-card>
                        </el-col>
                    </el-row>
                    <a id="beiana" href="http://beian.miit.gov.cn/" rel="nofollow" class="icp nav-link" target="_blank" _mstmutation="1" _istranslated="1">Copyright © 2024 一夕千念. All rights reserved. 皖ICP备2021002870号-2</a>
                </el-main>
            </el-container>
            
            <!-- <h2>留言板</h2> -->
        </div>
        <!-- <h1>留言板</h1> -->
        <!-- <input v-model="username" type="text" placeholder="请输入用户名（最多20个字符）"> -->
        <br>
        <!-- <input v-model="newMessage" type="text" placeholder="请输入留言"> -->
        <!-- <button @click="sendMessage">发送留言</button> -->
        <!--<ul>-->
        <!--    <li v-for="(message, index) in reversedMessages" :key="index">-->
        <!--        {{ message.username }}:<div v-html="formatMessage(message.content)"></div>-->
                 <!-- {{ message.content }}  -->
        <!--         - {{ formatDate(message.timestamp) }}-->
        <!--    </li>-->
        <!--</ul>-->
        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- elementui -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="message.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="message.js"></script>
</body>
</html>
<!-- 清空表中数据DELETE FROM messages; -->
<!-- 清除指定id那一行的数据DELETE FROM messages WHERE id = 4; -->